<template>
  <div id="input_list">
    <div class="content">
      <div class="inputBox">
        <ul>
          <li class="country" v-if="inputShowList.countryCodeShow && !inputShowList.logPlugIn">
            <van-field v-model.trim="form.country" type="number" clearable placeholder="86"
              maxlength="5"
              :rules="[{ required: true, message: '请输入国际区号' }]" :mode="false" required>
              <template #label>
                <div style="width: 6rem;margin-left: 0.75rem;font-weight: 500;font-weight: 550;" >
                  国家区号
                </div>
              </template>
            </van-field>
            <div></div>
          </li>
          <li v-if="!inputShowList.logPlugIn">
            <van-field v-model.trim="form.mobile" type="number" clearable placeholder="请输入您的手机号"
              :rules="[{ required: true, message: '请输入您的手机号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="https://shops.cg500.com/static/zc_phone.png" style="width: 1rem;height: 1.063rem;" />
                  <!-- <img src="../assets/images/loginPhone.png" style="width: 0.719rem;height: 1.063rem;" /> -->
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
            <div class="label" v-if="type == 'register'">注册后，该手机号将作为登录凭证</div>
            <div></div>
          </li>
          <!-- 账号-->
          <li v-if="inputShowList.logPlugIn">
            <van-field v-model.trim="form.account" type="text" clearable placeholder="请输入账号"
              :rules="[{ required: true, message: '请输入账号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/login_user.png" style="width:1rem;height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!-- -->
          <!-- 图形验证码-->
          <li v-if="inputShowList.captchaShow && !inputShowList.logPlugIn">
            <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息"
              :rules="[{ required: true, message: '请输入图形信息' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/ht_bg_bgimg.png" style="width: 0.95rem;height: 0.875rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;display: flex;align-items: center;">
                <img :src="imgcode" style="width: 3.594rem;height: 1.5rem;" @click="getimgdata()" />
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 短信验证码-->
          <li class="verCode" v-if="!inputShowList.logPlugIn && uniacid != '54'  && uniacid != '70' && uniacid != '95' && uniacid != '121' && uniacid != '128'">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请输入短信验证码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="https://shops.cg500.com/static/zc_yzm.png" style="width:  1rem;height: 1rem;" />
                  <!-- <img src="../assets/images/auth_code.png" style="width: 0.875rem;height: 1rem;" /> -->
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <!-- <div style="font-size: 12px;" :style="'color:'+'var(--themeBaseColor)'" @click="verificationCode">{{btnText}}</div> -->
                <div style="font-size: 12px;" :style="'color:' + '#00aaff'" @click="verificationCode">{{btnText}}</div>

              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 账号 换牛二期-88 开始-->
          <li v-if="uniacid == '88'">
            <van-field v-model.trim="form.login_name" type="text" clearable placeholder="请输入账号6位数字"
              :rules="[{ required: true, message: '请输入账号6位数字' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/login_user.png" style="width:1rem;height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!--账号 换牛二期-88 结束 -->
          <!-- 密码-->
          <li v-if="inputShowList.passwordInputShow">
            <van-field v-model.trim="form.password" clearable :type="passwordShow?'text':'password'" placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <div style="width: 1.188rem;">
                    <img
                      :src="passwordShow?require('@/assets/images/view_password.png'):require('@/assets/images/no_view_password.png')"
                      :style="passwordShow?'width: 0.95rem;height: 0.7rem;':'width: 0.95rem;height: 0.4rem;'"
                      @click="viewPasswordSwitching"/>
                  </div>
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
           
           <!-- 导师id 换牛二期-88 开始-->
           <li v-if="uniacid == '88'">
            <van-field v-model.trim="form.daoshi_id" type="text" clearable placeholder="请输入导师id"
              :rules="[{ required: true, message: '请输入导师id' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/new/daoshi2.png" style="width:1.25rem;height: 1.25rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!--导师id 换牛二期-88 结束 -->

          <!-- 上级id 青情汇-95 开始-->
          <li v-if="uniacid == '95'">
            <van-field v-model.trim="shangji_id" type="text" disabled clearable placeholder="上级id"
              :rules="[{ required: true, message: '上级id' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/new/daoshi2.png" style="width:1.25rem;height: 1.25rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!--上级id 青情汇-95 结束 -->
          
          <!--谷昕宇 70 查看上级 -->
           <li v-if="!inputShowList.logPlugIn && uniacid == '70'">
            <van-field v-model.trim="superiorMobile" clearable type="digit" placeholder="请输入上级手机号"
              :rules="[{ required: true, message: '请输入上级手机号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="https://shops.cg500.com/static/zc_phone.png" style="width: 1rem;height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button>
                <div style="font-size: 12px;" :style="'color:' + '#00aaff'" @click="viewSuperior">绑定上级</div>
              </template>
            </van-field>
            <!-- <div></div> -->
            <!-- <div style="display: flex;" class="bind-sup">
              <div class="" style="display: flex;width: 3.2rem;">
                  <img src="https://shops.cg500.com/static/zc_phone.png" style="width: 1rem;height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon" style="width: 21.5px;height:23.5px;"></div>
              </div>
              <div style="display: flex;justify-conten: space-between;">
                <input type="text" class="input-bind-class" placeholder="请输入上级手机号">
                <div style="font-size: 12px;" :style="'color:' + '#00aaff'" @click="viewSuperior">绑定上级</div>
              </div>
              
            </div> -->
          </li>
          <!-- 昵称 -->
          <li v-if="!inputShowList.logPlugIn && uniacid == '70' && nickname != ''" class="nick-name">

            <div>
              昵称
            </div>
            <div>
              {{nickname}}
            </div>
            
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Toast
} from 'vant';
export default {
  props: ["type", 'inputShowList'],
  data() {
    return {
      form: {
        mobile: "",
        password: "",
        captcha: "",
        code: "",
        confirm_password: "",
        country: "86",
        account:"",
        login_name: '',//换牛二期88-账号
        daoshi_id: "",//换牛二期88-导师id
      },
      superiorMobile: "",//上级手机号 谷昕雨70
      nickname: '',//用户名 谷昕雨70
      toastLogin: '',
      btnText: '获取验证码',
      passwordShow: false,
      passwordConfirmShow: false,
      imgcode: "", //验证码图片地址
      subjectColor: '', //主题色
      uniacid: '',
      shangji_id: '',//上级id--青情汇--95
    };
  },
  mounted() {
    this.subjectColor = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color;
    this.getimgdata();
    console.log(localStorage.getItem("uniacid"),'localStorage.getItem("uniacid")111111');
    this.uniacid = localStorage.getItem("uniacid") ? localStorage.getItem("uniacid") : '';
    this.shangji_id = this.$route.query.mid ? this.$route.query.mid : 0;
  },
  methods: {
    // 谷昕雨 70 查看上级
    viewSuperior(){
      if(this.superiorMobile == ''){
         Toast("电话号不能为空");
         return
      }
      var that = this;
      $http
          .get("Guxinyu.search_member", {
            mobile: this.superiorMobile,
          })
          .then(
            response => {
              Toast.clear();
              if (response.result == 1) {
                console.log(response.data,'kkkkkkk')
                this.$emit('getInviteCode',response.data.invite_code);
                that.nickname = response.data.nickname;
                // that.form = response.data.nickname;
              } else {
                Toast(response.msg);
                
              }
            },
            response => {
              console.log(response.msg);
            }
          );
    },
    //发送验证码
    verificationCode() {
      if(this.btnTag) return;
      let that = this;
      if (this.fun.isTextEmpty(this.form.country) && this.inputShowList.countryCodeShow) {
        Toast("请输入国际区号");
        return;
      }
      if (this.fun.isTextEmpty(this.form.mobile)) {
        Toast("请填写手机号");
        return;
      }
      if (this.fun.isMoblie(this.form.mobile)) {
        Toast("请填写正确的手机号");
        return;
      }
      if (this.fun.isTextEmpty(this.form.captcha) && this.inputShowList.captchaShow) {
        Toast("请填写图形验证码");
        return;
      }

      this.toastLogin = Toast({
        duration: -1, // 持续展示 toast
        message: '发送中...'
      });
      if(this.uniacid == '43' || this.uniacid == '46' || this.uniacid == '58') {
        $http
          .get("SMS.index1", {
            mobile: this.form.mobile,
            captcha: this.form.captcha,
            state:this.form.country,
            code: this.form.code,
            reset: "1",
            sms_type: 1
          })
          .then(
            response => {
              Toast.clear();
              if (response.result == 1) {
                that.sendCodeAnimation();
              } else {
                Toast(response.msg);
                //刷新图形验证码
                this.form.captcha = "";
                this.getimgdata();
              }
            },
            response => {
              console.log(response.msg);
            }
          );
      }else if(this.uniacid == '89') {
        $http
          .get("NiuTwo.sms", {
            mobile: this.form.mobile,
            captcha: this.form.captcha,
            state:this.form.country,
            code: this.form.code,
            reset: "1",
            sms_type: 1
          })
          .then(
            response => {
              Toast.clear();
              if (response.result == 1) {
                that.sendCodeAnimation();
              } else {
                Toast(response.msg);
                //刷新图形验证码
                this.form.captcha = "";
                this.getimgdata();
              }
            },
            response => {
              console.log(response.msg);
            }
          );
      }else {
        //发送获取验证码的请求
        $http
          .get("member.register.sendCodeV2", {
            mobile: this.form.mobile,
            captcha: this.form.captcha,
            state:this.form.country,
            code: this.form.code,
            reset: "1",
            sms_type: 1
          })
          .then(
            response => {
              this.toastLogin.clear();
              if (response.result === 1) {
                that.sendCodeAnimation();
              } else {
                //刷新图形验证码
                Toast(response.msg);
                this.form.captcha = "";
                this.getimgdata();
              }
            },
            response => {
              console.log(response.msg);
            }
          );
      }
    },
    //发送验证码 倒计时
    sendCodeAnimation() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        Toast.success('验证码已发送');
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.btnText = this.count + "s后重新获取";
            this.btnTag = true;
          } else {
            this.btnTag = false;
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //获取图片验证码
    getimgdata() {
      $http
        .get("home-page.getCaptcha")
        .then(res => {
          if (res.data.captcha) {
            this.imgcode = res.data.captcha.img;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    viewPasswordSwitching() { //密码显示隐藏切换
      this.passwordShow = !this.passwordShow;
    },

    viewConfirm_PasswordSwitching() { //密码显示隐藏切换
      this.passwordConfirmShow = !this.passwordConfirmShow;
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .verCode .van-field .van-field__value .van-field__body .van-field__control {
  width: 50% !important;
}
::v-deep .verCode .van-field .van-field__value .van-field__body .van-field__button {
  position: absolute;
  right: 0;
}
  #input_list {
    .content {
      background-color: white;
      border-radius: 0.313rem;
      padding: 0.2rem;
      margin: 0.625rem;
      position: relative;
    }

    .inputBox {
      // position: relative;
      // padding-right: 0.9rem;
      // margin-top: -0.2rem;
      width: 92%;
      margin: auto;

      .country {
        ::v-deep .van-field__control{
          margin-left: 2rem;
        }
        ::v-deep .van-cell--required::before{
          left: 9px;
        }
      }

      .slotIphone {
        display: flex;
        color: #00001c;
        font-size: 15px;

        .icon {
          font-size: 21px;
          margin-left: 0.3rem;
          ;
        }

      }

      .label {
        color: #4e4e4e;
        font-size: 12px;
        margin-left: 0.8rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }

      .slotCode {
        color: #00001c;
        display: flex;
        align-items: center;
        width: 1.063rem;
        margin-top: -0.2rem;
        margin-left: 0.7rem;
        .icon {
          font-size: 21px;
          margin-left: 0.6rem;
          margin-top: 0.2rem;
        }
      }

      .passwordLogin {
        color: #f14e4e;
        letter-spacing: 0.6px;
        font-size: 12px;
        font-weight: 550;
        margin-top: 17px;
        margin-left: 16px;
      }

      ::v-deep ul li .van-cell {
        align-items: center;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 0.3rem;
      }

      ::v-deep ul li .van-field__label {
        width: 3.2rem;
      }

      ::v-deep .van-field__label {
        color: #00001c;
        font-weight: 550;
        letter-spacing: 0.5px;
        width: 3.7rem;
      }
    }
  }
  .nick-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ededed;
    border-radius: 25px;
    height: 55px;
    margin-top: 12px;
    padding: 10px 16px;
  }
  .bind-sup {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border: 1px solid #ededed;
    border-radius: 25px;
    height: 55px;
    margin-top: 12px;
    padding: 10px 16px 10px 5px;
  }
  .input-bind-class {
    border: none;
  }
</style>
